<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.dav {
				position: relative;
				top: 200px;
				left: 30%;
			}

			.dbv {
				list-style-type: none;
				position: absolute;
				bottom: 0px;
				left: 12%;
				bottom: 1%;
				display: flex;
			}

			.dbv li {
				/* opacity: 0.2; */
				border: 1px solid red;
				border-radius: 50%;
				background-color: white;
				height: 16px;
				width: 16px;
			}
		</style>
	</head>
	<body>
		<div class="dav">
			<a href="#" id="lj" target="_blank" ><img id="imga" src="img/1.jpg" alt=""></a>
			<ul class="dbv">
				<li class="lia" id="a1"></li>
				<li class="lia" id="a2"></li>
				<li class="lia" id="a3"></li>
				<li class="lia" id="a4"></li>
				<li class="lia" id="a5"></li>
			</ul>
		</div>
	</body>
	<script>
		var i = 1;
		var arr = ["https://www.baidu.com/", "https://www.baidu.com/",
			"https://www.baidu.com/", "https://www.baidu.com/", "https://www.baidu.com/"
		]

		function chuange() {
			let imga = document.querySelector("#imga");
			let lianjie = document.querySelector("#lj")
			let a = document.querySelectorAll(".lia");
			// for(let j=0;j<a.length;j++){
			// 	a[j].style.backgroundColor="blue";
			// }
			if (i != 1) {
				a[i - 2].style.backgroundColor = "white";
			} else {
				a[4].style.backgroundColor = "white";
			}

			a[i - 1].style.backgroundColor = "red";
			imga.src = "img/" + i + ".jpg";
			lianjie.href = arr[i-1];
			i++;
			if (i > 5) {
				i = 1;
			}
		}
		var lun = setInterval(function() {
			chuange();
		}, 1000);
		var imgb = document.querySelector("#imga");
		imgb.onmouseover = function() {
			clearInterval(lun);
		};
		imgb.onmouseout = function() {
			lun = setInterval(function() {
				chuange();
			}, 1000);
		}
	</script>
</html>
